<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">

<head>
    <div th:replace="/fragments/header :: header"/>
</head>

<body>

<div th:replace="/fragments/header :: navbar"/>

<div class="container">

    <h1 class="jumbotron">
        <span sec:authentication="name"></span>'s Shopping Cart
    </h1>

    <div class="alert alert-info" th:if="${outOfStockMessage}" th:utext="${outOfStockMessage}"></div>

    <div class="panel-default well" th:each="product : ${products.entrySet()}">
        <div class="panel-heading">
            <h1><a th:text="${product.getKey().name}" th:href="@{'/product/' + ${product.getKey().id}}">Title</a></h1>
            <h3 th:text="${product.getKey().description}">Description</h3>
        </div>
        <div class="row panel-body">
            <div th:inline="text" class="col-md-2">Price: [[${product.getKey().price}]] $</div>
            <div th:inline="text" class="col-md-9">Quantity: [[${product.getValue()}]]</div>
            <a th:href="@{'/shoppingCart/removeProduct/{id}'(id=${product.getKey().id})}" class="col-md-1">
                <button type="button" class="btn btn-primary" th:text="Remove">Remove</button>
            </a>
        </div>
        <br></br>
    </div>

    <div class="row panel-body">
        <h2 class="col-md-11" th:inline="text">Total: [[${total}]]</h2>
        <a th:href="@{'/shoppingCart/checkout'}" class="col-md-1">
            <button type="button" class="btn btn-danger" th:text="Checkout">Checkout</button>
        </a>
    </div>

</div>

<div th:replace="/fragments/footer :: footer"/>

</body>
</html>